<template>
  <div class="page">
    <!--  搜索栏  -->
<!--    <el-row style="height: 42px">
      <SearchBar />
    </el-row>-->
    <!--  内容区域  -->
    <el-row style="height: calc(100% - 50px)">
      <!-- 按钮 -->
      <el-col :span="24" style="padding: 10px 0px 10px 0px;border-top: 1px solid #e4e7ed;height: 53px">
        <el-col :span="12">
          <el-button type="primary" icon="el-icon-edit-outline" @click="openAddDrawer">添加</el-button>
          <el-button type="primary" icon="el-icon-edit" @click="openUpdateDrawer"
                     :disabled="selectRows.length!==1">编辑
          </el-button>
          <el-button type="primary" icon="el-icon-info" @click="openDetailDrawer"
                     :disabled="selectRows.length!==1">详情
          </el-button>
          <el-button type="danger" icon="el-icon-delete" @click="onDelete" :disabled="selectRows.length===0">删除
          </el-button>
        </el-col>
        <el-col :span="12" style="text-align: right">
          <el-button icon="el-icon-refresh" @click="loadTableData">刷新</el-button>
          <el-button icon="el-icon-back" @click="$router.go(-1)">返回</el-button>
        </el-col>
      </el-col>
      <!-- 表格 -->
      <el-col :span="24" style="padding-bottom: 10px;height: calc(100% - 103px)">
        <t-table :data="tableData" @checkbox-all="selectChangeEvent"
                 @checkbox-change="selectChangeEvent">
          <vxe-column type="checkbox" width="60" key="checkbox"></vxe-column>
          <template v-for="item in columns">
            <vxe-column v-if="item.colCfg" :field="item.field" :title="item.title" v-bind="{...item.colCfg}"
                        :key="'_'+item.field">
              <template v-if="item.colCfg.isSlot" v-slot="{row}">
                <slot :name="'col-'+item.field" v-bind="{row}"></slot>
              </template>
            </vxe-column>
            <vxe-column v-else :field="item.field" :title="item.title"
                        :key="'_'+item.field">
            </vxe-column>
          </template>

          <vxe-column field="createTime" width="180" title="创建时间"></vxe-column>
          <vxe-column field="updateTime" width="180" title="编辑时间"></vxe-column>
        </t-table>
      </el-col>
    </el-row>
    <!--  分页条  -->
    <el-col :span="24" style="text-align: center;height: 50px">
      <t-pagination :url="urlPage" :data.sync="tableData" :query-params="{...dependId}" ref="pagination"/>
    </el-col>

    <!-- 新增抽屉 -->
    <add-form-drawer :form-desc="formItems" :rules="rules"
                     :visible="isAddDrawer" @close="isAddDrawer=false"
                     :add-url="urlAdd" :dependId="dependId"
                     @saveSuccess="saveSuccess"/>
    <!-- 编辑抽屉 -->
    <edit-form-drawer :form-desc="formItems" :rules="rules"
                      :visible="isUpdateDrawer" @close="isUpdateDrawer=false"
                      :update-url="urlUpdate" :url-query-by-id="urlQueryById"
                      :row-data="selectRows[0]" :id-prop="idProp" :dependId="dependId"
                      @updateSuccess="updateSuccess"/>
    <!--  详情抽屉  -->
    <detail-form-drawer :visible="isDetailDrawer" @close="isDetailDrawer=false"
                        :form-desc="formDesc" :row-data="selectRows[0]"/>
  </div>
</template>

<script>
import pageMixins from "../common/mixins/pageMixins";
import SearchBar from "../common/components/SearchBar";
import addFormDrawer from "../common/components/addFormDrawer";
import editFormDrawer from "../common/components/editFormDrawer";
import detailFormDrawer from "../common/components/detailFormDrawer";

export default {
  name: "PageTwo",
  mixins:[pageMixins],
  components:{SearchBar,addFormDrawer,editFormDrawer,detailFormDrawer},

  props:{
    dependId:{
      type:Object,
      required:true
    },
  },
  data() {
    return {
    };
  },
  methods: {

  },
}
</script>

<style scoped>

</style>